/*
 * @Description: 
 * @Version: 2.0
 * @Author: 
 * @Date: 2022-04-02 12:59:43
 * @LastEditors: cxc
 * @LastEditTime: 2022-04-06 19:21:37
 */
import React, { useState } from 'react'
import { Row, Col, Form, Input, Button, Select, Radio, DatePicker, Tooltip } from 'antd'
import {
  QuestionOutlined
} from '@ant-design/icons';

export default function ManagerScope() {
  const SpecifiedRange = '部分'
  const [range, setRange] = useState(SpecifiedRange)
  // 渲染数据
  const depart = [
    {
      d_id: 0,
      name: '总经办',
      children: [
        {
          u_id: '01',
          name: '超级管理员'
        },
        {
          u_id: '02',
          name: 'cxc'
        },
      ]
    },
    {
      d_id: 1,
      name: '财务部',
    }

  ]
  return (
    <Row>
      {/* 头部 */}
      <Col span={24}>
        <Row>
          <Col span={6}>
            <span>管理范围设置</span>
          </Col>
          <Col span={18}>
            <Radio.Group name="radiogroup" value={SpecifiedRange}>
              <Radio value={'所有客户'}>所有客户</Radio>
              <Radio value={'部分'}>管理范围内的客户</Radio>
            </Radio.Group>
            <Tooltip title="查看所有的客户，或指定查看谁的客户。" className='dept_row_setDepBtn_icon2_title'>
              <QuestionOutlined className='dept_row_setDepBtn_icon2' />
            </Tooltip>
          </Col>
        </Row>
        {/* 管理范围内的客户 */}
        {range === '全部' ? <></> : <>
          {depart.map(item1 => {
            return <Row key={item1.d_id}>
              <Col span={6}>
                <span>{item1.name}</span>
              </Col>
              <Col span={18}>

                {console.log(item1.children)}
                {/* {item1.children === 'undefined' ? <></> : item1.children.map(item2 => {
                  return <span key={item2.u_id}>
                    {item2.name}
                  </span>
                })} */}
              </Col>
            </Row>
          })}
        </>}
      </Col>
    </Row>
  )
}
